<template>
  <view class="container-gray">
    <view class="basic-info">
      <view class="info-title">三违信息</view>
      <view class="info-body">
        <view class="name">违反时间</view>
        <view class="value">{{info.breakRuleTime}}</view>
      </view>

      <view class="info-body">
        <view class="name">处罚原因</view>
        <view class="value">{{info.reason}}</view>
      </view>

      <view class="info-body">
        <view class="name">处罚结果</view>
        <view class="value">{{info.punishResult}}</view>
      </view>

      <view class="info-body" v-if="info.breakRule">
        <view class="name">违反规则</view>
        <view class="value">{{info.breakRule}}</view>
      </view>

      <view class="info-body" v-if="info.punishLevel">
        <view class="name">处罚等级</view>
        <view class="value">{{info.punishLevel}}</view>
      </view>
    </view>

    <view class="basic-info" v-if="info.punishNoticeUrl">
      <view class="info-title">处罚通知书</view>
      <view class="info-body">
        <img :src="info.punishNoticeUrl" mode="widthFix" class="notice-img" />
      </view>
    </view>

    <view class="basic-info" v-if="info.trainNoticeUrl">
      <view class="info-title">培训通知书</view>
      <view class="info-body">
        <img :src="info.trainNoticeUrl" mode="widthFix" class="notice-img" />
      </view>
    </view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'

export default {
  data() {
    return {
      id: '',
      info: {},
      hidden: false,
      delId: null,
      delIdx: null
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getWorkInfo()
  },
  methods: {
    // 获取违章信息
    getWorkInfo() {
      post_md5(`/breakrule-app/breakrule/info/${this.id}`).then(res => {
        this.info = res.data
      })
    },

    // 删除弹窗
    openModel(id, index) {
      this.hidden = true
      this.delId = id
      this.delIdx = index
    }
  }
}
</script>

<style lang="less">
.basic-info {
  padding: 20upx;
  background: #fff;

  .info-title {
    color: #000;
    font-size: 42upx;
  }

  .info-body {
    margin: 20upx 0;
    padding: 20upx 0;
    border-bottom: 3upx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .name {
      color: #909399;
      font-size: 22upx;
      padding-left: 10upx;
      border-left: 4upx solid #02a8f4;
    }

    .value {
      padding-top: 5upx;
      color: #303133;
      font-size: 28upx;
      padding-left: 14upx;
    }

    .notice-img {
      width: 100%;
    }
  }
}
</style>
